<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<h:form id='stock_req_form'>
		<h:head>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>

			<script type="text/javascript"
				src="../../resources/script/jquery.dataTables.js"></script>
			<script
				src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery-ui-1.9.0.custom.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/management/scripts/stock_req.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/scripts/global.js"></script>
			
			<style type="text/css" title="currentStyle">
				@import "../../resources/css/datatable_page.css";
				@import "../../resources/css/datatable_table.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/themes/base/jquery.ui.all.css";
				@import "${facesContext.externalContext.requestContextPath}/views/management/css/stock_req.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/tabs.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/global.css";
			</style>

			<script type="text/javascript" charset="utf-8">
				//<![CDATA[
					$(function() {
						//$("[id='stock_req_form:lines_table']").dataTable();
						
						checkAttributes();
						
						$( "#tabs" ).tabs({
							beforeLoad: function( event, ui ) {
								ui.jqXHR.error(function() {
									ui.panel.html(
										"Couldn't load this tab. We'll try to fix this as soon as possible. " +
										"If this wouldn't be a demo." );
								});
							},
						beforeActivate: function(event, ui)
						{
							var link = "stockreq/requisition_lines.faces?requisition_no=";
						    var requisitionNo =  $("[id='stock_req_form:requisition_no']").val();
						    link += requisitionNo;
						    $("#req_lines_tab").attr("href", link);
							link = "";
						}
						});
						
						thumbnailDisplay();
					});
				//]]>
			</script>

		</h:head>
		<body>
			<div>
				<ui:include src="../../views/header/header.xhtml" />
				<br /> <br /> <br />
			</div>
			
			<div>
			<h2>Stock Requisition</h2>
			
			<div id="function_div">
				<h:commandButton id="save_btn" value="Save" action="#{stockReqBean.saveStockReqAction}"> 
				</h:commandButton>
				
				<h:commandButton id="complete_btn" value="Complete" action="#{stockReqBean.completeStockReqAction}"> 
				</h:commandButton>
				
				<h:commandButton id="finalise_btn" value="Finalise" action="#{stockReqBean.finaliseStockReqAction}"
								 onclick="return finaliseBtnOnclick()"> 
				</h:commandButton>
				<h:commandButton id="cancel_btn" value="Cancel" action="#{stockReqBean.cancelStockReqAction}"
								 onclick="return cancelBtnOnclick()"> 
				</h:commandButton>
			
			</div>
			</div>
			<div id="tabs" >
				<ul>
					<li><a href="#tabs-1">Stock Req</a></li>
					<li >
					<!-- 
						<a id="req_lines_tab" href="#">Requisition Lines</a>
					 -->
					 <a href="#tabs-2">Stock Req Lines</a>
					</li>
				</ul>
				<div id="tabs-1">
					<div>
						<table>
							<tr>
								<td>
									<h:outputLabel value="Requisition No"></h:outputLabel>
								</td>
								<td>
									<h:inputText id="requisition_no_hidden" value="#{stockReqBean.requisitionNo}" class="hidden_input"></h:inputText>
									<h:inputText id="requisition_no" value="#{stockReqBean.requisitionNo}" disabled="true"></h:inputText>
								</td>
								<td>
									<h:commandButton id="officer_code_btn" value="Officer Code" action="#{stockReqBean.openUsersAction}">
									</h:commandButton>
								</td>
								<td>
									<h:inputText id="officer_code_hidden" value="#{stockReqBean.officerCode}" class="hidden_input"></h:inputText>
									<h:inputText id="officer_code" value="#{stockReqBean.officerCode}" disabled="true"></h:inputText>
								</td>
							</tr>
							
							<tr>
								<td>
									<h:commandButton id="store_code_btn" value="Store Code"
										action="#{stockReqBean.openStoresAction}">
									</h:commandButton>
								</td>
								<td>
									<h:inputText id="store_code_hidden" value="#{stockReqBean.storeCode}" class="hidden_input"></h:inputText>
									<h:inputText id="store_code" value="#{stockReqBean.storeCode}" disabled="true"></h:inputText>
								</td>
								<td>
									<h:commandButton id="transaction_code_btn" value="Transaction Code"
										action="#{stockReqBean.openTransactionReferencesAction}">
									</h:commandButton>
								</td>
								<td>
									<h:inputText id="transaction_code_hidden" value="#{stockReqBean.transactionCode}" class="hidden_input"></h:inputText>
									<h:inputText id="transaction_code" value="#{stockReqBean.transactionCode}" disabled="true"></h:inputText>
								</td>
							</tr>
							
							<tr>
								<td>
									<h:outputLabel value="Transaction Date"></h:outputLabel>
								</td>
								<td>
									<h:inputText id="transaction_date_hidden" value="#{stockReqBean.transactionDate}" class="hidden_input"></h:inputText>
									<h:inputText id="transaction_date" value="#{stockReqBean.transactionDate}" disabled="true"></h:inputText>
								</td>
								<td>
									<h:outputLabel value="Postage"></h:outputLabel>
								</td>
								<td>
									<h:inputText id="postage" value="#{stockReqBean.postage}"></h:inputText>
								</td>
							</tr>
							
							<tr>
								<td>
									<h:outputLabel value="status"></h:outputLabel>
								</td>
								<td>
									<h:inputText id="status_hidden" value="#{stockReqBean.status}" class="hidden_input"></h:inputText>
									<h:inputText id="status" value="#{stockReqBean.status}" disabled="true"></h:inputText>
								</td>
								<td>
									<h:outputLabel value="Comments"></h:outputLabel>
								</td>
								<td>
									<h:inputTextarea id="comment" value="#{stockReqBean.comment}"></h:inputTextarea>
								</td>
							</tr>
							
						</table>
						
					</div>
				</div>
				
				<div id="tabs-2">
					<div>
						<h:commandButton id="add_items_btn" value="Add Items" action="#{stockReqBean.openItemsAction}"  >
						</h:commandButton>
						
				 <br/>
					</div>
					<div>
					<h:dataTable id="lines_table" value="#{stockReqBean.attachedLines}" var="line">
			    	    <h:column rendered="false">
			    			<f:facet name="header">Store Code</f:facet>
			    			<h:inputText value="#{line.storeCode}" disabled="true"/>
			    			<h:inputText value="#{line.storeCode}" class="hidden_input"/>
			    	     </h:column>
			    	     <h:column>
	      		    	 	<f:facet name="header">Item Code</f:facet>
			    		 	<h:inputText value="#{line.itemCode}" size="10"  disabled="true"/>
			    		 	<h:inputText value="#{line.itemCode}" size="10" class="hidden_input"/>
			    	     </h:column>
			    	     <h:column>
	      		    	 	<f:facet name="header">Icon</f:facet>
			    		 	<img class="thumbnail" width="42" height="42" src="/shop/upload/icons/#{line.itemCode}.jpg"/>
			    	     </h:column>
			    	      <h:column>
	      		    	 	<f:facet name="header">Price</f:facet>
			    		 	<h:inputText value="#{line.price}" size="5" class="disabled_input"/>
			    	     </h:column>
			    	      <h:column>
	      		    	 	<f:facet name="header">Quantity</f:facet>
			    		 	<h:inputText value="#{line.qty}" size="5" class="disabled_input"/>
			    	     </h:column>
			    	      <h:column rendered="false" >
	      		    	 	<f:facet name="header">Officer Code</f:facet>
	      		    	 	<h:inputText value="#{line.officerCode}" size="5" disabled="true"/>
			    		 	<h:inputText value="#{line.officerCode}" size="5" class="hidden_input"/>
			    	     </h:column>
			    	      <h:column>
	      		    	 	<f:facet name="header">Transaction Date</f:facet>
			    		 	<h:inputText value="#{line.transactionDate}" size="10" disabled="true"/>
			    		 	<h:inputText value="#{line.transactionDate}" size="10" class="hidden_input"/>
			    	     </h:column>
			    	      <h:column>
	      		    	 	<f:facet name="header">Status</f:facet>
			    		 	<h:inputText value="#{line.lineStatus}" size="8" disabled="true"/>
			    		 	<h:inputText value="#{line.lineStatus}" size="8" class="hidden_input"/>
			    	     </h:column>
			    	     
			    	     <h:column>
	      		    	 	<f:facet name="header">Action</f:facet>
			    		 	<h:commandButton id="remove_line_btn" class="disabled_input" value="Remove" action="#{stockReqBean.removeStockReqLineAction(line.itemCode)}">
			    		 	</h:commandButton>
			    	     </h:column>
					 
					 </h:dataTable>
					 
						
					</div>
				</div>
			</div>

			<ui:include src="../../views/footer/footer.xhtml" />
		</body>


	</h:form>
</f:view>
</html>
